<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="lib/layui-v2.5.5/css/layui.css">
    <title>客户数变动分析</title>
    <link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="css/public.css" media="all">
    <link rel="stylesheet" href="css/card.css">

</head>
<body>
<div class="layui-col-md8">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form">
            <div class="layui-inline">
                <label class="layui-form-label">开始月份</label>
                <div class="layui-input-inline">
                    <input type="text" name="startTime" id="=startTime" class="layui-input datetime" placeholder="(包含此月)" required lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">终止月份</label>
                <div class="layui-input-inline">
                    <input type="text" name="endTime" id="endTime" class="layui-input datetime" placeholder="(不包含此月)" required lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i
                        class="layui-icon">&#xe666;</i> 重载数据</a>
            </div>
            </form>
        </div>
        <div class="layui-card-body">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header"><i class="fa fa-warning icon"></i>客户统计</div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-xs6">
                                    <div class="panel layui-bg-number">
                                        <div class="panel-body">
                                            <div class="panel-title">
                                                <span class="label pull-right layui-bg-blue" id="interval1">年</span>
                                                <h5>客户增加数</h5>
                                            </div>
                                            <div class="panel-content">
                                                <h1 class="no-margins" id="incrCustomerNum">1234</h1>
                                                <small>vip客户数：<span id="incrCustomerVIPPer"> 48</span>%</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="panel layui-bg-number">
                                        <div class="panel-body">
                                            <div class="panel-title">
                                                <span class="label pull-right layui-bg-cyan" id="interval2">年</span>
                                                <h5>客户删除数</h5>
                                            </div>
                                            <div class="panel-content">
                                                <h1 class="no-margins" id="decrCustomerNum">1234</h1>
                                                <br/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header"><i class="fa fa-user-secret icon"></i>活跃客户</div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-xs6">
                                    <div class="panel layui-bg-number">
                                        <div class="panel-body">
                                            <div class="panel-title">
                                                <span class="label pull-right layui-bg-orange" id="interval3">年</span>
                                                <h5>跟进客户数</h5>
                                            </div>
                                            <div class="panel-content">
                                                <h1 class="no-margins" id="followNum">1234</h1>
                                                <br/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="panel layui-bg-number">
                                        <div class="panel-body">
                                            <div class="panel-title">
                                                <span class="label pull-right layui-bg-green" id="interval4">年</span>
                                                <h5>客户合作数</h5>
                                            </div>
                                            <div class="panel-content">
                                                <h1 class="no-margins" id="contractNum">1234</h1>
                                                <br/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <!--echarts-->
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>客户增长折线图</div>
                        <div class="layui-card-body">
                            <div id="main" style="width: 100%;height:400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-col-md4">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs6">
            <div class="layui-card">
                <div class="layui-card-header"><i class="fa fa-users icon"></i>现有客户总数</div>
                <div class="layui-card-body " style="color: rgb(102,102,102);">
                    <h1 id="allCustomerNum">0</h1>
                    <small>vip客户数：<span id="allCustomerVIPPer"> 48</span>%</small>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-card">
                <div class="layui-card-header"><i class="fa fa-user-times icon"></i>已删客户总数</div>
                <div class="layui-card-body" style="color: rgb(102,102,102);">
                    <h1 id="allDecrCustomerNum">0</h1>
                    <br/><!-- <small>vip客户数：<span> 48%</span></small>-->
                </div>
            </div>
        </div>
        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header"><i class="fa fa-pie-chart icon"></i>当前客户所属行业</div>
                <div class="layui-card-body">

                    <div id="bing" style="width: 100%;min-height: 400px">
                    </div>
                    <script>

                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<!--<script src="js/lay-module/echarts/echarts.js"></script>
<script src="js/lay-module/echarts/echartsTheme.js"></script>-->
<script src="js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<!--<script src="js/lay-module/layuimini/layuimini.js" charset="utf-8"></script>-->
<script>
    layui.use(['form', 'layer', 'laydate','echarts'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            echarts = layui.echarts,
            laydate = layui.laydate;

        $('.datetime').each(function () {
            laydate.render({
                elem: this       //使用this指向当前元素,不能使用class名, 否则只有第一个有效
                , type: 'month'
            });
        });
        getData();
        form.on("submit(data-search-btn)",function (data) {
           getData(data);
        });
        var xAxisData = [];
        var increaseData = [];
        var decreaseData = [];
        function getData(data) {
            if(data!=null) data = data.field;
            $.ajax({
                type:"post",
                data:data,
                url:"allSingleData",
                success:function (result) {
                    //console.log(result);
                    $("#incrCustomerNum").html(result.incrCustomerNum);
                    $("#incrCustomerVIPPer").html(result.incrCustomerVIPPer);
                    $("#decrCustomerNum").html(result.decrCustomerNum);
                    $("#followNum").html(result.followNum);
                    $("#contractNum").html(result.contractNum);
                    $("#allCustomerNum").html(result.allCustomerNum);
                    $("#allCustomerVIPPer").html(result.allCustomerVIPPer);
                    $("#allDecrCustomerNum").html(result.allDecrCustomerNum);
                    if(data != null){
                        $("#interval1").html("区间");
                        $("#interval2").html("区间");
                        $("#interval3").html("区间");
                        $("#interval4").html("区间");
                    }
                    $.ajax({
                        type:"post",
                        data:data,
                        url:"customerLineData",
                        success:function (result) {
                            //console.log(result);
                            var incr = result.increase;
                            increaseData.length = 0;
                            decreaseData.length = 0;
                            xAxisData.length = 0;
                            for(var i in incr){
                                xAxisData.push(i);
                                increaseData.push(incr[i])
                            }
                            var decr = result.decrease;
                            for(var i in decr){
                                decreaseData.push(decr[i])
                            }
                            myChart.setOption({
                                xAxis: {
                                    data: xAxisData
                                },
                                series: [{
                                    // 根据名字对应到相应的系列
                                    name: '客户增加',
                                    data: increaseData
                                },{
                                    name: '客户减少',
                                    data: decreaseData
                                }
                                ]
                            });
                        }
                    });
                    $.ajax({
                        type:"post",
                        data:data,
                        url:"customerPieData",
                        success:function (result) {
                            //console.log(result);
                            myChart1.setOption({
                                legend: {
                                    data: result.content
                                },
                                series: [{
                                    // 根据名字对应到相应的系列
                                    name: '客户来源',
                                    data: result.pieData
                                }
                                ]
                            });
                        }
                    });
                    layer.msg("数据加载完成",{time:1000});
                }
            })
        }

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '客户变化'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['客户增加', '客户减少']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            //data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            data:xAxisData
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '客户增加',
                type: 'line',
                //tack: '总量',
                //data: [150, 232, 201, 154, 190, 330, 410],
                data:increaseData,
                itemStyle: {
                    color: 'rgb(145,199,174)'
                }
            },
            {
                name: '客户删除',
                type: 'line',
                //stack: '总量',
                //data: [320, 332, 301, 334, 390, 330, 320]
                data:decreaseData
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


    var myChart1 = echarts.init(document.getElementById('bing'));
    // 指定图表的配置项和数据
    var option1 = {
        title: {
            text: '客户所属行业',
            //subtext: '纯属虚构',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['电子商务', '对外贸易', '酒店旅游', '房地产', '其它']
        },
        series: [
            {
                name: '客户来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    {value: 335, name: '电子商务'},
                    {value: 310, name: '对外贸易'},
                    {value: 234, name: '酒店旅游'},
                    {value: 135, name: '房地产'},
                    {value: 1548, name: '其它'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);

    });
</script>


</body>
</html>
